<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="height: 150px;background-image: url('./img/logo.png')">
            <el-row>
                <el-col :span="18">
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                </el-col>
                <el-col :span="6">
                    <el-button icon="el-icon-search">登录</el-button>
                    <el-button icon="el-icon-search">注册</el-button>
                    <a href="back.html"><el-button icon="el-icon-search">后端管理</el-button></a>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-row>
                <el-input placeholder="请输入内容" v-model="busId" class="input-with-select">
                    <template slot="prepend">车号</template>
                    <el-button slot="append" icon="el-icon-search" @click="searchCarId()"></el-button>
                </el-input>
            </el-row>
            <br>
            <el-row>
                <el-col :span="10">
                    <el-input placeholder="请输入内容" v-model="startingPoint" class="input-with-select">
                        <template slot="prepend">起始地</template>
                    </el-input>
                </el-col>
                <el-col :span="1" style="margin-top: 10px"><span><===></span></el-col>
                <el-col :span="10">
                    <el-input placeholder="请输入内容" v-model="endPoint" class="input-with-select">
                        <template slot="prepend">目的地</template>
                    </el-input>
                </el-col>
                <el-col :span="3">
                    <el-button icon="el-icon-search" @click="searchLine()">查询最短线路</el-button>
                </el-col>
            </el-row>
        </el-main>
        <el-footer>Footer</el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                busId: "",
                startingPoint: "",
                endPoint: "",
                restaurants: [],
                state: '',
                visible: false
            }
        },
        methods: {
            handleIconClick() {
                console.log("点击")
            },
            searchCarId() {
                console.log("car")
            },
            searchLine(){
                console.log("line")
            }
        }
    })
</script>
</html>